اضافه کردن View درMVC-- آموزش گام به گام ام وی سی

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام MVC5 را به شما عزیزان آموزش دهد. لذا قسمت سوم آموزش در زیر قرار داده شده است.

در این بخش کلاس HelloWorldcontroller را به صورتی تغییر خواهیم داد که با استفاده از فایل های الگو فرآیند پاسخ های HTML به یک کاربر تسهیل شود.

شما با استفاده از موتور Razor view یک فایل الگو خواهید ساخت.الگو های ساخته شده توسط Razor پسوند cshtml خواهند داشت و یکی از بهترین راه های ساخت خروجی HTML با استفاده از #C را فراهم می کنند.Razor تعداد کاراکترها و ضربه به کلیدهای مورد نیاز برای یک الگوی view را به حداقل می رساند و سبب روان و سریعتر شدن جریان کد نویسی می شود.

در حال حاضر متد index یک پیام از نوع رشته که در حقیقت یک hard-code در کلاس controller است برمی گرداند. متد index را تغییر دهید تا همانند کد زیر یک view object برگرداند:

public ActionResult Index()



{returnView();}

در متد index از یک الگوی view برای ساخت یک پاسخ HTML به مرورگر استفاده می شود. متدهای controller (که به متدهای action نیز معروف هستند) به عنوان نمونه متد index بالا به جای انواع اولیه مانند رشته، ActionResult برمی گردانند.

بر روی پوشه ی views\Helloworld راست کلیک کنید و بر روی add کلیک کنید سپس بر روی MVC 5 View Page with(Layout Razor) کلیک کنید.

درکادر Specify Name for Item کلمه Index را ok کنید.

در کادر select a Layout page گزینه پیش فرض-Layout.cshtml را انتخاب و بر روی آن Ok کنید.

در کادر بالا پوشه ی Views\shared در قسمت سمت چپ انتخاب شده است. اگر یک فایل custom Layout در یک پوشه ی دیگر دارید، می توانید آن را نیز انتخاب کنید. درمورد فایل های Layout در بخش های دیگر توضیحات بیشتری خواهیم داد.

اکنون فایل MvcMovie\views\HelloWorld\Index. cshtml ساخته شده است.

بخش های زیر را اضافه کنید.

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

@{

    ViewBag.Title = "Index";

<h2>Index</h2><p>Hello from our View Template!</p>

روی فایل کلیک راست کنید و view in browser

همچنین می توانید بر روی فایل index.cshtml راست کلیک کنید و قسمت View in page inspector را انتخاب کنید.

روش دیگر اجرای برنامه و باز کردن HelloWorldcontroller(http://locaohost:xxxx/HelloWorldcontroller) است. متد index چندان کارساز نخواهد بود ، در این روش بلافاصله عبارت ()return view را دریافت خواهید کرد، یعنی حتما باید از یک فایل قالب برای ارائه پاسخ به مرورگر استفاده کنید. بدلیل اینکه دقیقا نام فایل view را تعیین نکرده اید، خود ASP.NET MVC به صورت پیش فرض از فایل index.cshtml view در پوشه ی \views\HelloWorldاستفاده می کند. در تصویر زیر عبارت Hello from our view Template استفاده شده است.

اگر با دقت نگاه کنید متوجه می شوید که در ستون عنوان مرورگر عبارتIndex My ASP.NET Appli را نشان می دهد و در لینک بزرگی که در بالای صفحه است نام برنامه نوشته شده است. در صورتی که اندازه ی پنجره ی مرورگر شما کوچک باشد باید بر روی سه نوار افقی که در قسمت بالا سمت راست می بینید کلیک کنید تا بتوانید لینک های صفحه ی اصلی ، درباره ی ما ، تماس با ما، ثبت نام و ورود را ببینید.

تغییر نما و طرح صفحات

نخست می خواهید نام برنامه را که در بالای صفحه نوشته تغییر دهید. این متن در هر صفحه ای وجود دارد‌. اگرچه فقط در یک قسمت پروژه از این نام استفاده می کنید در همه ی صفحات نمایش داده خواهد شد.به قسمت /views/shared folder in solution Explorer بروید و فایل Layout.cshtml را باز کنید‌.

این فایل یک صفحه ی Layout نامیده می شود و در پوشه ی اشتراکی قرار دارد که همه ی صفحات از آن استفاده می کنند

قالب هایLayout امکان نگه داری لایه های HTML مربوط به سایت شما را در یک مکان فراهم می کنند و سپس آن را در صفحات چندگانه به کار می برند. خط @Render Body()@ را پیدا کنید. RenderBody جایی است که همه ی صفحات view در آن نگه داری می شوند.

محتویات عنوان را با استفاده از علائم زیر تغییر دهید.

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8"/>

<metaname="viewport"content="width=device-width, initial-scale=1.0">



<title>@ViewBag.Title - Movie App</title>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</head>

<body>

<divclass="navbar navbar-inverse navbar-fixed-top">

<divclass="container">

<divclass="navbar-header">

<buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse">

<spanclass="icon-bar">

</span>

<spanclass="icon-bar">

</span>

<spanclass="icon-bar">

</span>

</button>

                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })

            </div>

<divclass="navbar-collapse collapse">

<ulclass="nav navbar-nav">

<li>@Html.ActionLink("Home", "Index", "Home")

</li>

<li>@Html.ActionLink("About", "About", "Home")

</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")

</li>

</ul>

                @Html.Partial("_LoginPartial")

            </div>

</div>

</div>

<divclass="container body-content">

        @RenderBody()

        <hr/>

<footer>

<p>&copy; @DateTime.Now.Year - My ASP.NET Application

</p>

</footer>

</div>

    @Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")

    @RenderSection("scripts", required: false)

</body>



</html>

برنامه را اجرا کنید و حالا دقت کنید "MVC Movie" را ببینید بر روی لینک about کلیک کنید، حالا صفحه "MVC Movie" را نشان می دهد. ما قالبLayout را تغییر دادیم و همه ی صفحات سایت عنوان جدید را نشان دادند.

وقتی اولین بار فایل Views\HelloWorld\Index.cshtml را ساختیم شامل کد زیر بود:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

اکنون بیایید عنوان Index view را تغییر دهیم . قسمت MvcMovie\Views\HelloWorld\Index.chtmp را باز کنید. دو قسمت است که باید تغییر دهید: اول متنی که در عنوان مرورگر ظاهر شده است، و بعد از آن header دوم (h2) با کمی تغییر آنها متوجه خواهید شد که کدام قسمت کد کدام قسمت برنامه را تغییر می دهد.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

برای نشان دادن عنوان HTML, کد بالا سبب ایجاد یک کد مخصوص اشیا ViewBag می شود(که در قلب Index.chtml view) قرار دارند. اگر به source code قالب layout نگاهی بیندازید، متوجه خواهید شد که قالب از این مقدار در قسمت title و به عنوان بخشی از قسمت head متعلق به HTML استفاده می کند که قبلا هم تغییر داده شده است.

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8"/>
<metaname="viewport"content="width=device-width, initial-scale=1.0">

<title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

با استفاده از این روش viewbag می توانید پارامترهای دیگر را بین قالب view و فایل layout خود حرکت دهید.

برنامه را اجرا کنید و به آدرس http://localost:xx/Heloworld بروید‌.توجه کنید که عنوان مرورگر ، یعنی قسمت heading اول، و heading دوم تغییر کرده باشند.(اگر تغییری در مرورگر نمی بینید، احتمالا به محتوای ذخیره نگاه می کنید‌. دکمه ی Ctrl+F5 را در مرورگر خود فشار دهید تا سرور مجبور شود پاسخ دهد). عنوان مرورگر با viewBag ساخته شده است. عنوانی که در قالب Index.cshtml view تنظیم کردیم و Movieapp به فایل Layout اضافه شدند.

همچنین توجه کنید که محتوای قال Index.cshtml با قالب -Layout.cshtml view ادغام شده است و یک HTML واحد به مرورگر فرستاده شده است.قالب Layout امکان ایجاد تغییرات کلی را در همه ی صفحات برنامه ی شما فراهم می کند.

یک قسمت از عنوان (در این قسمت کلمه ی Hello باز قالب view) به صورت سخت کد درآمده است. برنامه ی MVC یک ( V(view یک C هم برای Controller دارید اما برای model هنوز حرفM وجود ندارد. بعدا در مورد ساخت پایگاه داده ها و دریافت مدل های داده ای از آن بیشتر صحبت خواهیم کرد.

ادامه آموزش در قسمت چهارم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

:: برچسب‌ها: mvc , visual studio , asp , net mvc , آموزش asp , net mvc , آموزش ام وی سی , همه چیز درباره MVC ,

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0